<template>
  <el-container class="panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          补货记录
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <el-table
        height="100%"
        class="sa-table"
        :data="table.data"
        @sort-change="fieldFilter"
        row-key="id"
        stripe
      >
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column sortable="custom" prop="id" label="ID" min-width="80"></el-table-column>
        <el-table-column label="商品" min-width="400">
          <template #default="scope">
            <goods-item
              v-if="scope.row.goods"
              :goods="{
                image: scope.row.goods.image,
                title: scope.row.goods.title,
                sku_text: scope.row.goods_sku_text,
              }"
              mode="stockLog"
            ></goods-item>
            <div v-else>{{ scope.row.goods_id }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="before" label="补货前" min-width="106"></el-table-column>
        <el-table-column prop="stock" label="补货库存" min-width="106"></el-table-column>
        <el-table-column prop="msg" label="补货备注" min-width="124"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="172"></el-table-column>
        <el-table-column prop="update_time" label="更新时间" width="172"></el-table-column>
        <el-table-column label="操作人" min-width="140" fixed="right">
          <template #default="scope">
            <sa-user-profile type="oper" :user="scope.row.oper" :id="scope.row.admin_id" />
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.goods.stocklog',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from './goods.service';
  import { usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import { cloneDeep } from 'lodash';
  import GoodsItem from '@/app/shop/components/goods-item.vue';

  const filterParams = reactive({
    tools: {
      'goods.title': {
        type: 'tinput',
        label: '商品名称',
        field: 'goods.title',
        value: '',
      },
    },
    data: {
      'goods.title': '',
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      'goods.title': 'like',
    });
    const { error, data } = await api.stockLog({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
      order: table.order,
      sort: table.sort,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }

  // table 字段排序
  function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss">
  .el-popover.admin-popper {
    color: var(--sa-font);
    font-size: 12px;
    font-weight: 400;
    .id {
      color: var(--sa-subfont);
    }
    .label {
      font-size: 12px;
    }
    .nickname {
      font-weight: 500;
    }
  }
</style>
